<template>
  <div>
    <el-tabs v-model="activeName" class="outer">
      <el-tab-pane label="套餐信息" name="first">
        <FormPanel ref="formPanel" :list="formList" :cols="3" :isSubmitBtn="false" labelWidth="100" />
      </el-tab-pane>
    </el-tabs>
    <div style="margin-top:10px"></div>
    <el-tabs v-model="activeName" class="outer">
      <el-tab-pane label="套餐规则" name="first">
        <FormPanel ref="PackagerulesformPanel" :list="PackagerulesformList" :cols="4" :isSubmitBtn="false" labelWidth="100" />
        <div v-if="filterIf" class="panel-heading">里程与时间范围</div>
        <FormPanel v-if="filterIf" ref="mileageAndTime" :list="mileageAndTimeformList" :cols="3" :isSubmitBtn="false" labelWidth="110" />
        <div v-if="filterIf" class="panel-heading">里程与时间间隔</div>
        <FormPanel v-if="filterIf" ref="mileageAndTime1" :list="mileageAndTimeformList1" :cols="3" :isSubmitBtn="false" labelWidth="110" />
        <div v-if="filterIfs" class="panel-heading">里程与时间间隔</div>
        <FormPanel v-if="filterIfs" ref="mileageAndTimeInterval" :list="mileageAndTimeIntervalformList" :cols="3" :isSubmitBtn="false" labelWidth="130" />
      </el-tab-pane>
    </el-tabs>
    <div style="margin-top:5px"></div>
    <el-tabs v-model="activeName" class="outer">
      <el-tab-pane label="项目信息列表" name="first" style="margin-top:10px">
        <FilterTable ref="table" :columns="columns" :isSelectColumn="false" :params="fetchParams" :height="120" :onColumnsChange="columns => (this.columns = columns)" />
      </el-tab-pane>
    </el-tabs>
    <div style="margin-top:10px"></div>
    <el-tabs v-model="activeName" class="outer">
      <el-tab-pane label="备件信息列表" name="first">
        <FilterTable ref="table2" :columns="columnsPart" :params="fetchParams1" :isSelectColumn="false" :height="120" :onColumnsChange="columns => (this.columns = columns)"></FilterTable>
      </el-tab-pane>
    </el-tabs>
    <BaseDialog :visible.sync="viewReplacementNameData" title="套餐替换件" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <ViewReplacementName :replace="replace" @close="close" />
    </BaseDialog>
    <el-row>
      <div class="box_02">
        <el-button size="small" type="primary" @click="viewReplacementName()">替换件查看</el-button>
        <el-button size="small" icon="el-icon-refresh-left" type="primary" @click="closeDetails()">取消</el-button>
      </div>
    </el-row>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { queryLabour, queryPart, queryDetail } from '@/api/repair/activitiesManage/activitiesPackageQuery';
import ViewReplacementName from './viewReplacementName';
export default {
  name: 'detailsAddActivity',
  components: {
    ViewReplacementName
  },
  mixins: [dictionary],
  props: ['detaildata'],

  data() {
    return {
      formList: this.createFormList(),
      PackagerulesformList: this.createPackagerulesformList(),
      mileageAndTimeformList: this.createmileageAndTimeformList(),
      mileageAndTimeformList1: this.createmileageAndTimeformList1(),
      mileageAndTimeIntervalformList: this.createmileageAndTimeIntervalformList(),
      columns: this.createTableColumns(),
      columnsPart: this.createTableColumnPart(),
      viewReplacementNameData: false,
      activeName: 'first',
      activeModel: 'first',
      filterIf: false,
      filterIfs: false,
      fetchParams: { xhrAbort: true },
      fetchParams1: { xhrAbort: true },
      replace: ''
    };
  },
  created() {
    this.changeStatus();
    this.init();

    // this.getDictBrandList()
  },
  mounted() {
    this.queryLabour(this.detaildata.PACKAGE_ID);
  },
  methods: {
    changeStatus() {
      console.log(9876123, this.detaildata);
      if (this.detaildata.PACKAGE_TYPE == '81041006') {
        this.filterIfs = 'true';
      } else {
        this.filterIf = 'true';
      }
    },
    init() {
      this.formList.forEach(x => {
        x.initialValue = this.detaildata[x.fieldName];
      });
      this.PackagerulesformList.forEach(x => {
        x.initialValue = this.detaildata[x.fieldName];
      });
    },
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '套餐代码',
          fieldName: 'PACKAGE_CODE',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '套餐名称',
          fieldName: 'PACKAGE_NAME',
          placeholder: '',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '套餐类型',
          fieldName: 'PACKAGE_TYPE',
          placeholder: '',
          disabled: true,
          itemList: this.createDictList('8104')
        },
        {
          type: 'INPUT',
          label: '车系',
          fieldName: 'SERIES_NAME',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车型',
          fieldName: 'MODEL_NAME',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车辆用途',
          fieldName: 'VEHICLE_PURPOSE',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '工时',
          fieldName: 'EFFECTIVE_TIME',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '工时费',
          fieldName: 'LABOUR_AMOUNT',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '材料费',
          fieldName: 'REPAIR_PART_AMOUNT',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '备注',
          selfCols: 2,
          fieldName: 'REMARK',
          placeholder: '',
          disabled: true
        },
        {
          type: 'CHECKBOX',
          labelOptions: {
            type: 'CHECKBOX',
            fieldName: 'STATUS',
            disabled: true,
            options: {
              trueValue: 10041001,
              falseValue: 10041002
            }
          },
          fieldName: 'STATUS',
          render: props => {
            return <span>是否启用</span>;
          }
        }
      ];
    },
    createPackagerulesformList() {
      return [
        {
          type: 'SELECT',
          label: '逻辑关系',
          fieldName: 'LOGIC_RELATION',
          placeholder: '',
          disabled: true,
          itemList: this.createDictList('8107')
        },
        {
          type: 'INPUT',
          label: '总次数',
          fieldName: 'TOTAL_TIMES',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '第次',
          fieldName: 'NUMBER_TIME',
          placeholder: '',
          disabled: true
        },
        {
          type: 'CHECKBOX',
          label: '是否免费',
          fieldName: 'IS_FREE',
          itemList: [],
          placeholder: '',
          disabled: true,
          options: {
            trueValue: 10041001,
            falseValue: 10041002
          }
        }
      ];
    },
    createmileageAndTimeformList1() {
      return [
        {
          type: 'INPUT',
          label: '里程间隔下限(Km)',
          fieldName: 'MILEAGE_INTERVAL_LOW',
          offsetLeftCols: 1,
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '里程间隔上限(Km)',
          fieldName: 'MILEAGE_INTERVAL_HIGH',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '时间间隔下限(月)',
          fieldName: 'DATE_INTERVAL_LOW',
          offsetLeftCols: 1,
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '时间间隔上限(月)',
          fieldName: 'DATE_INTERVAL_HIGH',
          placeholder: '',
          disabled: true
        }
      ];
    },
    createmileageAndTimeformList() {
      return [
        {
          type: 'CHECKBOX',
          label: '里程控制',
          fieldName: 'IS_MILEAGE_CONTROL',
          disabled: true,
          options: {
            trueValue: 10041001,
            falseValue: 10041002
          }
        },
        {
          type: 'INPUT',
          label: '起始里程(Km)',
          fieldName: 'START_MILEAGE',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '截止里程(KM)',
          fieldName: 'END_MILAGE',
          placeholder: '',
          disabled: true
        },
        {
          type: 'CHECKBOX',
          label: '时间控制',
          fieldName: 'IF_DATE_CONTROL',
          disabled: true,
          options: {
            trueValue: 10041001,
            falseValue: 10041002
          }
        },
        {
          type: 'INPUT',
          label: '起始月',
          fieldName: 'START_MONTHS',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '截止月',
          fieldName: 'END_MONTHS',
          disabled: true
        }
      ];
    },
    createmileageAndTimeIntervalformList() {
      return [
        {
          type: 'INPUT',
          label: '更换里程周期(Km/次)',
          fieldName: 'MILEAGE_REPLACE_CYCLE',
          placeholder: '',
          offsetLeftCols: 1,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '更换时间周期(月/次)',
          fieldName: 'DATE_REPLACE_CYCLE',
          placeholder: '',
          disabled: true
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '项目代码',
          dataIndex: 'LABOUR_CODE',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '项目名称',
          dataIndex: 'LABOUR_NAME',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '工时',
          dataIndex: 'EFFECTIVE_TIME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '工时费',
          dataIndex: 'LABOUR_AMOUNT',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    createTableColumnPart() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '项目代码',
          dataIndex: 'LABOUR_CODE',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '项目名称',
          dataIndex: 'LABOUR_NAME',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '备件代码',
          dataIndex: 'PART_NO',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '备件名称',
          dataIndex: 'PART_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '单价',
          dataIndex: 'PART_SALES_PRICE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '数量',
          dataIndex: 'PART_QUANTITY',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    async queryLabour(id) {
      const res = await queryLabour(id);
      this.$refs.table.$refs.pageTable.EXECUTE_INSERT(res.data.rows);
      const ress = await queryPart(id);
      this.$refs.table2.$refs.pageTable.EXECUTE_INSERT(ress.data.rows);
      this.getReceiptsDetail(id);
    },
    async getReceiptsDetail(id) {
      const res = await queryDetail(id);
      for (let [key, value] of Object.entries(res.data)) {
        this.mileageAndTimeformList.some(item => {
          if (item.fieldName === key) {
            item.initialValue = value;
            return true;
          }
        });
      }
      for (let [key, value] of Object.entries(res.data)) {
        this.mileageAndTimeformList1.some(item => {
          if (item.fieldName === key) {
            item.initialValue = value;
            return true;
          }
        });
      }
      for (let [key, value] of Object.entries(res.data)) {
        this.mileageAndTimeIntervalformList.some(item => {
          if (item.fieldName === key) {
            item.initialValue = value;
            return true;
          }
        });
      }
    },
    viewReplacementName() {
      this.replace = this.detaildata;
      this.viewReplacementNameData = true;
    },
    closeDetails() {
      this.$emit('detailsAddActivity', false);
    },
    // 对后台取出来的值进行转换
    ischange(sql) {
      if (sql == 10041001) {
        return 1;
      } else {
        return 0;
      }
    },
    close() {
      this.viewReplacementNameData = false;
    }
  }
};
</script>
<style lang="less" scoped>
.box_02 {
  text-align: center;
  margin-top: 20px;
}
.outer {
  border: 1px solid @borderColor;
  border-radius: @borderRadius;
  box-shadow: @boxShadow;
  padding: @modulePadding;
}
.panel-heading {
  color: #34495e;
  background-color: #f5f5f5;
  border-color: #ddd;
  padding: 10px 15px;
  margin-bottom: 10px;
}
</style>
